<div class="layui-card-body">
  <div class="layui-fluid">
    <div class="layui-row">
      <div class="layui-col-xs12">
        <form class="layui-form" action="">
          <input type="radio" name="loadType" lay-filter="rnuwg1rbzyb" data-id="r3labj58eqhx" value="SPA"
                 title="单页面方式" checked="">
          <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
            <div>单页面方式</div>
          </div>
          <input type="radio" name="loadType" lay-filter="rnuwg1rbzyb" data-id="r2rrf6nfatln" value="TABS"
                 title="选择卡方式">
          <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                  class="layui-anim layui-icon"></i>
            <div>选择卡方式</div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <br>
  <h4>主题</h4>
  <br>
  <div class="layui-row">
    <div class="layui-col-xs12" style="margin-bottom:15px;">

      <div class="layui-row layui-col-space5">
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="default">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
                                <span class="color bg-default"></span>
                                 <span class="color bg-default-light"></span>
                            </span>
              <span class="color bg-gray-dark"></span>
            </label>
          </div>
        </div>
      </div>
      <div class="layui-row layui-col-space5">
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="blue-light">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
          <span class="color bg-info"></span>
          <span class="color bg-info-light"></span>
        </span>
              <span class="color bg-white"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="green-light">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
          <span class="color bg-green"></span>
          <span class="color bg-green-light"></span>
        </span>
              <span class="color bg-white"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="purple-light">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
          <span class="color bg-purple"></span>
          <span class="color bg-purple-light"></span>
        </span>
              <span class="color bg-white"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="red-light">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
          <span class="color bg-danger"></span>
          <span class="color bg-danger-light"></span>
        </span>
              <span class="color bg-white"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-xs12">
      <div class="layui-row layui-col-space5">
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="blue-dark">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
            <span class="color bg-info"></span>
            <span class="color bg-info-light"></span>
          </span>
              <span class="color bg-gray-dark"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="green-dark">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
            <span class="color bg-green"></span>
            <span class="color bg-green-light"></span>
            </span>
              <span class="color bg-gray-dark"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="purple-dark">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
            <span class="color bg-purple"></span>
            <span class="color bg-purple-light"></span>
          </span>
              <span class="color bg-gray-dark"></span>
            </label>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="setting-color">
            <label data-theme="red-dark">
              <input type="radio" name="setting-theme">
              <i class="layui-icon layui-icon-ok-circle"></i>
              <span class="split">
            <span class="color bg-danger"></span>
            <span class="color bg-danger-light"></span>
          </span>
              <span class="color bg-gray-dark"></span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script th:src="@{'/js/jquery.min.js'}"></script>
  <script>
      $(function () {
          var themeKey = 'KITADMIN_SETTING_THEME';
          var theme = localStorage.getItem(themeKey);
          var themeName = "default"
          if(theme != null){
              themeName = $.parseJSON(theme).theme;
          }
          $("input[name='setting-theme']").each(function () {
              if($(this).parent().attr("data-theme") == themeName){
                  $(this).attr("checked","checked");
              }
          })
      })
      layui.use(['form', 'utils'], function () {
          var form = layui.form,
              $ = layui.jquery,
              utils = layui.utils,
              localStorage = utils.localStorage;

          form.render();
          var key = 'KITADMIN_SETTING_LOADTYPE';
          var setting = localStorage.getItem(key);
          if (setting !== null) {
              if (setting.loadType === 'SPA') {
                  $('input[data-id="r3labj58eqhx"]')[0].checked = true;
              } else {
                  $('input[data-id="r2rrf6nfatln"]')[0].checked = true;
              }
              form.render('radio');
          }
          form.on('radio(rnuwg1rbzyb)', function (data) {
              var val = data.value;
              localStorage.setItem(key, {
                  loadType: val
              });
              // 重新加载
              location.reload();
          });


          var themeKey = 'KITADMIN_SETTING_THEME';
          $('input[name="setting-theme"]').on('click', function () {
              var _that = $(this);
              var themeName = _that.parent('label').attr('data-theme');
              localStorage.setItem(themeKey, {
                  theme: themeName
              });
              var str = $('#theme').attr('href');
              var _themeUrl = str.substr(0, str.lastIndexOf('/') + 1);
              $('#theme').attr('href', _themeUrl + themeName + '.css');
              var _body = $('body');
              if (!_body.hasClass('kit-theme-' + themeName)) {
                  _body.addClass('kit-theme-' + themeName);
              }
          });
      });
  </script>
  <style scoped="">
    .setting-color {
      padding: 0 5px;
    }

    .setting-color > label {
      display: block;
      position: relative;
      margin: 0 10px;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }

    .setting-color > label > input[type="radio"] {
      position: absolute;
      opacity: 0;
      visibility: hidden;
      box-sizing: border-box;
      padding: 0;
      overflow: visible;
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .setting-color > label .split {
      display: block;
    }

    .setting-color > label .split .color:first-child {
      float: left;
      width: 70%;
    }

    .setting-color > label .split .color {
      display: block;
      height: 37.5px;
    }

    .setting-color > label .split .bg-default {
      background-color: #373d41;
      color: #42485b !important;
    }

    .setting-color > label .split .bg-default-light {
      background-color: #373d41;
      color: #42485b !important;
    }

    .setting-color > label .split .bg-info {
      background-color: #23b7e5;
      color: #fff !important;
    }

    .setting-color > label .split .bg-info-light {
      background-color: #51c6ea;
      color: #fff !important;
    }

    .setting-color > label .split .bg-green {
      background-color: #37bc9b;
      color: #fff !important;
    }

    .setting-color > label .split .bg-green-light {
      background-color: #58ceb1;
      color: #fff !important;
    }

    .setting-color > label .split .bg-purple {
      background-color: #7266ba;
      color: #fff !important;
    }

    .setting-color > label .split .bg-purple-light {
      background-color: #9289ca;
      color: #fff !important;
    }

    .setting-color > label .split .bg-danger {
      background-color: #f05050;
      color: #fff !important;
    }

    .setting-color > label .split .bg-danger-light {
      background-color: #f47f7f;
      color: #fff !important;
    }

    .setting-color > label i.layui-icon-ok-circle {
      position: absolute;
      display: block;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      margin-top: -20px;
      margin-left: -10px;
      text-align: center;
      font-size: 1.33333333em;
      vertical-align: -15%;
      color: #fff;
      opacity: 0;
    }

    .setting-color > label input[type="radio"]:checked + i.layui-icon-ok-circle {
      opacity: 1 !important;
    }

    .setting-color > label .color {
      display: block;
      height: 18px;
    }

    .setting-color > label .bg-white {
      background-color: #fff;
      color: inherit !important;
    }

    .setting-color > label .bg-gray-dark {
      background-color: #3a3f51;
      color: #fff !important;
    }

    .setting-color > label:last-child {
      margin-right: 0;
    }

    .setting-color > label:first-child {
      margin-left: 0;
    }
  </style>
</div>